<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="./js/vue.js"></script>
    <style>
        #app{
            margin: auto;
            width: 300px;
            border: 5px solid black;
        }
        .one{
            margin: auto;
            width: 200px;
            margin: 20px 50px;
        }
        .two{
            margin: auto;
            margin-bottom: 20px;
            width: 200px;
            height: 400px;
        }
        li{
            width: 170px;
            margin-left: -20px;
        }
        .fork{
            color: red;
        }
        .content{
            width: 150px;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="one">
            <input v-model="newAddText" />
            <button @click='addNewList'>添加</button>
        </div>
        <div class="two">
            <ol>
                <li is='list-item' v-for='(list,index) in lists' v-bind:key='list.id'
                    v-bind:title='list.title' v-on:remove='lists.splice(index,1)'>
                </li>
            </ol>
            
        </div>
    </div>
    <script>
        Vue.component('list-item', {
            template: '\
            <li>\
            <div class="content">{{ title }}</div>\
            <span class="fork" v-on:click="$emit(\'remove\')">X</span>\
            </li>\
            ',
            props: ['title']
            })
      
        let vm = new Vue({
        el: '#app',
        data: {
        newAddText:'',
            lists:[
                {id:1,title:'嘀嘀嘀'},
            ],
            nextTodoId: 5
        },
        methods:{
            addNewList:function(){
                this.lists.push({
                    id:this.nextTodoId++,
                    title:this.newAddText
                })
                this.newAddText=''
            }
        }  
        })
      
    </script>
</body>

<html>